<template>
  <div class="order-confirm-page">
    <div class="order-confirm-container">
      <div class="header">
        <van-icon name="arrow-left" class="back-icon" @click="goBack" />
        <h1>确认订单</h1>
      </div>
      
      <!-- 订单信息卡片 -->
      <div class="order-info-card">
        <h3>订单信息</h3>
        
        <!-- 酒品信息 -->
        <div class="item-info">
          <img :src="orderInfo.deviceData?.item?.image || ''" alt="酒品图片" class="item-image" />
          <div class="item-details">
            <h4>{{ orderInfo.deviceData?.item?.name || '酒品名称' }}</h4>
            <p class="item-description">{{ orderInfo.deviceData?.item?.info || '酒品描述' }}</p>
            <div class="price-quantity">
              <span class="price">¥{{ orderInfo.price }}/ml</span>
              <span class="quantity">x{{ orderInfo.quantity }}ml</span>
            </div>
          </div>
        </div>
        
        <!-- 店铺信息 -->
        <div class="shop-info">
          <div class="info-item">
            <van-icon name="shop-o" class="info-icon" />
            <span>{{ orderInfo.deviceData?.shop?.shop_name || '店铺名称' }}</span>
          </div>
          <div class="info-item">
            <van-icon name="location-o" class="info-icon" />
            <span>{{ orderInfo.deviceData?.shop?.address || '店铺地址' }}</span>
          </div>
          <div class="info-item">
            <van-icon name="box-o" class="info-icon" />
            <span>设备编号: {{ orderInfo.device_id }}</span>
          </div>
        </div>
        
        <!-- 价格明细 -->
        <div class="price-details">
          <div class="price-item">
            <span>商品金额</span>
            <span>¥{{ (orderInfo.price * orderInfo.quantity).toFixed(2) }}</span>
          </div>
          <div class="price-item">
            <span>服务费</span>
            <span>¥0.00</span>
          </div>
          <div class="price-item total-price">
            <span>实付金额</span>
            <span>¥{{ orderInfo.total.toFixed(2) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 用户信息 -->
      <div class="user-info-card">
        <h3>用户信息</h3>
        <div class="user-details">
          <div class="info-item">
            <van-icon name="user-o" class="info-icon" />
            <span>{{ userInfo.nickname }}</span>
          </div>
          <div class="info-item">
            <van-icon name="phone-o" class="info-icon" />
            <span>{{ userInfo.phone }}</span>
          </div>
        </div>
      </div>
      
      <!-- 支付提示 -->
      <div class="payment-tips">
        <van-icon name="info-o" class="tips-icon" />
        <p>支付成功后，请在30分钟内完成打酒，超时订单将自动取消</p>
      </div>
    </div>
    
    <!-- 底部支付栏 -->
    <div class="bottom-payment">
      <div class="payment-info">
        <span>实付金额:</span>
        <span class="payment-amount">¥{{ orderInfo.total.toFixed(2) }}</span>
      </div>
      <van-button type="primary" size="large" class="pay-button" @click="handlePayment">
        立即支付
      </van-button>
    </div>
  </div>
</template>

<script>
import { api } from '../api'

export default {
  name: 'OrderConfirm',
  data() {
    return {
      orderInfo: {
        device_id: '',
        quantity: 0,
        price: 0,
        total: 0,
        deviceData: {}
      },
      userInfo: {
        nickname: '',
        phone: ''
      }
    }
  },
  mounted() {
    this.initOrderInfo()
  },
  methods: {
    // 初始化订单信息
    initOrderInfo() {
      // 从sessionStorage获取订单信息
      const savedOrderInfo = sessionStorage.getItem('orderInfo')
      if (savedOrderInfo) {
        this.orderInfo = JSON.parse(savedOrderInfo)
      } else {
        this.$toast('订单信息错误')
        this.$router.push('/')
        return
      }
      
      // 获取用户信息
      const savedUserInfo = localStorage.getItem('user')
      if (savedUserInfo) {
        this.userInfo = JSON.parse(savedUserInfo)
      }
    },
    
    // 返回上一页
    goBack() {
      this.$router.back()
    },
    
    // 处理支付
    async handlePayment() {
      try {
        // 显示加载中
        this.$toast.loading({ message: '支付中...', duration: 0 })
        
        // 模拟创建订单
        //const mockOrderId = Math.floor(Math.random() * 1000000)
        
        // 实际项目中应该先调用创建订单API，再调用支付API
        const createRes = await api.createOrder({
           device_id: this.orderInfo.device_id,
           num: this.orderInfo.quantity
        })
        const orderId = createRes.data.order_id
        await api.payOrder({ order_id: orderId })
        
        // 模拟支付过程
        setTimeout(() => {
          // 在Vant v4中移除this.$toast.clear()
          // 使用Vant v4的showToast方式
          this.$toast.success('支付成功')
          
          // 支付成功后跳转到订单成功页面，使用实际的orderId
          setTimeout(() => {
            this.$router.push(`/order-success/${orderId}`)
          }, 1500)
        }, 2000)
        
      } catch (error) {
        // 在Vant v4中移除this.$toast.clear()
        this.$toast('支付失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.order-confirm-page {
  height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

.order-confirm-container {
  width: 100%;
  padding-bottom: 70px;
}

.header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon {
  font-size: 20px;
  margin-right: 20px;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.order-info-card,
.user-info-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-info-card h3,
.user-info-card h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.item-info {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 15px;
}

.item-details {
  flex: 1;
}

.item-details h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.item-description {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}

.quantity {
  font-size: 14px;
  color: #666;
}

.shop-info,
.user-details {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.info-icon {
  margin-right: 10px;
  color: #999;
  font-size: 16px;
}

.price-details {
  margin-top: 10px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.total-price {
  font-weight: bold;
  font-size: 16px;
  color: #f56c6c;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.payment-tips {
  background-color: #f6f8ff;
  border-radius: 8px;
  padding: 12px 15px;
  margin: 0 15px 15px 15px;
  display: flex;
  align-items: flex-start;
}

.tips-icon {
  margin-right: 10px;
  color: #1989fa;
  margin-top: 2px;
}

.payment-tips p {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

.bottom-payment {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.payment-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.payment-amount {
  font-size: 20px;
  font-weight: bold;
  color: #f56c6c;
  margin-left: 5px;
}

.pay-button {
  min-width: 120px;
  padding: 12px 20px;
  border-radius: 20px;
  font-size: 16px;
}
</style>